html,body{ margin: 0; padding: 0;background: #f5f5f5}
*{cursor: pointer;}
div,p,span,img,ul,li{margin: 0; padding: 0;}
ul,li{list-style: none;}
input:focus{border:1px solid #83a500;outline: none;}
a{text-decoration: none;}
.left{float: left;}
.right{float: right;}
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;-moz-appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance:textfield;}
input {outline: none;-webkit-appearance: none;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
input[type="submit"],input[type="reset"],input[type="button"],button { -webkit-appearance: none; }
.reback{padding: 8px;background: #333}
.reback img{margin-left: 2%;width: 8%}
/* bind绑定账号  login登录*/
.index_img{width: 100%;object-fit: fill;}
.page-title{text-align:center;padding: 12.5px 0px 17.5px 0px;font-size: 18px;}
.input-item{max-width: 100%;text-align: center;padding: 0 8%}
.input-item input{width: 86%;height: 45px;margin: 0px auto;padding-left: 13%;border: 1px solid #cccccc;border-radius: 5px;font-size: 16px;}
.pwd{margin: 17.5px auto 30px auto}
.input{position: relative;}
.input-before{ position: absolute;z-index: 10;margin-top: 14px;padding:0px 8px;height: 23px;border-right: 1px solid #83a500;}
.input-before img{height: 22px}
.btn-group{padding: 0 8%}
.btn{padding:15px 0px;font-size: 16px;text-align: center;border-radius: 5px;}
.btn-green{background: #83a500;color: #fff}
.btn-green a{color: #fff;}
/* login 登录 */
.tip{padding: 0 8%;margin-bottom: 20px;font-size: 16px }
.tip a{color:#83a500;}
.tip span:nth-child(2){float: right}
/* pwd 更改密码*/
.change-pwd input{padding-left: 26%; width: 73%}
.change-pwd .input-before {width: 16%;border-right: 1px solid #333;}
/* forgetpwd  忘记密码*/
.forget{margin-top: 30px}
.submit-tip{text-align: center;color:#83a500;line-height: 20px;margin-top: 30px; }
.btn-gray{background: #cccccc}
/* my个人中心 */
.my-img{width: 100%;object-fit: fill;}
.my-info{height: 60px;line-height: 60px;margin-top: -5px;padding: 10px 6%;display: flex;color:#fff;font-size:14px;background: #425320;}
.my-head{width: 50%;display: flex;}
.my-head img{width: 60px;height: 60px;margin-right: 3%;margin-top: 2px;border-radius: 50%;}
.my-head span{font-size: 16px;}
.rank{width: 21%;padding: 0px 2%;position: relative;}
.rank span{font-size: 16px;margin-left: 8%; position:absolute}
.rank::after{content: '';width: 2px;position: absolute;background: #566a2e;right: 0px;top: 15px;height: 30px;}
.integral{width: 21%;padding: 0px 0px 0px 2%;position:relative}
.integral span{font-size: 16px;margin-left: 10%;position:absolute;left:35%}
.my-box{display: flex;flex-wrap: wrap;width: 100%;}
.my-box a{width: 49.5%;color: #333333}
.my-box a:nth-child(odd){margin-right: 1%}
.box-item{padding: 30px 8%;margin-top:5px;background: #fff;display: flex;}
.box-item img{width: 70px;height: 71px;}
.box-item .description{padding-top: 15px;margin-left: 2%}
.box-item .description p{line-height: 30px;}
.shop{margin-top:5px;}
.shop img{object-fit: fill;width: 100%}
/* exchange兑换明细 */
.exchange-item{background: #fff;display: flex;padding: 10px 5%;position: relative;border-bottom: 1px solid #e9e9e9;}
.exchange-item img{width: 60px;height: 60px;border: 1px solid #e9e9e9;}
.exchange-item .description{margin-left: 2%}
.exchange-item .description .title{color: #333333}
.exchange-item .description .time,.number{color:#cccccc;font-size: 14px}
.exchange-item .detail{position: absolute;top: 50%;right: 1%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);color: #cc0000}
/* setting 个人设置 */
.setting_head{background: url(../images/setting/setting_img.png);background-size: cover;background-repeat: no-repeat;padding: 25px 0px 20px 0px;text-align: center;color: #fff}
.setting_head img{width: 80px;height: 80px;margin-bottom: 10px;border-radius: 50%;}
.setting-box a{color: #333}
.setting-item-special{padding:15px 8% 15px 5%;color: #999999}
.setting-item{padding:20px 8% 20px 5%;position: relative;background: #fff;border-bottom:1px solid #e9e9e9; }
.setting-item::after{content: '';width: 13px;height: 16px;position:absolute;z-index:5;top: 50%;right: 1%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: url(../images/setting/right_icon.png);background-size: contain;background-repeat: no-repeat;}
.setting-item span:nth-child(2){color: #999}
.btn-white{background: #fff}
.btn-white a{color: #83a500;}
.setting-btn{margin-top: 65px;margin-bottom: 20px;}
/*rank  积分排行 */
.rank-head{padding-bottom: 15px;text-align:center;background: url(../images/rank/rank_img.png);background-size: cover;background-repeat: no-repeat;}
.rank_badge{width: 35%;position: relative;}
.rank-rank{position: absolute;left: 50%;top: 85px;color: #fff;font-size: 20px;    -webkit-transform: translate(-50%,0%);-ms-transform: translate(-50%,0%);transform: translate(-50%,0%);}
.rank-integral{padding: 10px auto}
.rank-classification{width: 43%;margin: 15px auto;display: flex;justify-content: space-around;border-radius: 20px;}
.rank-classification .branch_active{background: #83a500;}
.rank-classification .branch_active a{color: #fff}
.rank-classification span{width: 50%;padding: 5px 0px;border: 1px solid #576c17;background: #fff}
.rank-classification span:nth-child(1){border-top-left-radius: 20px;border-bottom-left-radius: 20px;border-right: none;}
.rank-classification span:nth-child(2){border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-left: none;}
/* .rank-classification span:nth-child(1) a{color: #fff}
.rank-classification span:nth-child(2) a{color: #999999} */
.rank-classification a{color: #999999}
.rank-filter{display: flex;background: #fff;}
.rank-filter li{text-align:center;list-style: none;}
.rank-filter .active{border-bottom:1px solid #83a500;}
.rank-filter .active span{color: #83a500}
.rank-filter li span{color: #000;position: relative;padding: 20px 0px;display: block}
.rank-filter li:nth-child(1),.rank-filter li:nth-child(2),.rank-filter li:nth-child(3){width: 28%;}
.rank-filter li:nth-child(1) span::after,.rank-filter li:nth-child(2) span::after{content: '';height: 25px;border: 1px solid #e9e9e9;position: absolute;z-index: 10;right: 0px;}
.rank-filter img{width: 55%; margin-left: 60%; }
.rank-filter li:nth-child(4){border-left: 1px solid #e9e9e9;}
.rank-item-special{padding: 15px 5%;color: #666666;}
.rank-item-special span:nth-child(2){margin-left: 13%}
.rank-item-name{margin-left: 19%}
.rank-item{padding: 20px 5%;background: #fff;border-bottom: 1px solid #e9e9e9;color: #333333;}
.rank-ranking{position: relative;z-index: 1;}
.rank-item:nth-child(1) span:nth-child(1),.rank-item:nth-child(2) span:nth-child(1),.rank-item:nth-child(3) span:nth-child(1){color: #fff}  
.rank-item:nth-child(1) .rank-ranking::after{content: '';position: absolute;left:-9px;top: -1px;z-index:-1;width: 26px;height: 30px;background: url(../images/rank/one.png);background-repeat: no-repeat;background-size: contain;}
.rank-item:nth-child(2) .rank-ranking::after{content: '';position: absolute;left:-9px;top: -1px;z-index:-1;width: 26px;height: 30px;background: url(../images/rank/two.png);background-repeat: no-repeat;background-size: contain;}
.rank-item:nth-child(3) .rank-ranking::after{content: '';position: absolute;left:-9px;top: -1px;z-index:-1;width: 26px;height: 30px;background: url(../images/rank/three.png);background-repeat: no-repeat;background-size: contain;}
/*integral-shop积分商城 */
.integral-left{width: 20%;float: left;}
.integral-left ul li{ text-align: center;padding: 20px 0px;color: #999}
.integral-left ul li:nth-child(1){color: #83a500}
.integral-right{width: 80%;float: left;display: flex;flex-wrap: wrap;}
.integral-item{width: 43.5%;padding:15px 3% 10px 3%;text-align: center;background:#fff;border-bottom: 1px solid #e9e9e9}
.integral-item .integral-img{padding:1%;border-bottom: 1px solid #e9e9e9}
.integral-img img{height: 150px;width: 100%;object-fit: fill;}
.integral-item:nth-child(odd){border-right: 1px solid #e9e9e9;}
.integral-detail .title{padding: 10px 0px}
.integral-detail{text-align: left;font-size: 14px}
.integral-detail .exchange{color: #fff;padding: 3px 7%;border-radius: 15px;background: #83a500;font-size: 12px}
/*my_accumulate 个人积分  */
.bonus{color: #cc0000}
.subtraction{color:#83a500 }
.accumulate_head{padding:20px 7%;color:#fff;background: url(../images/accumulate/my_accumulate.png);background-repeat: no-repeat;background-size: cover;display: flex;align-items: center;}
.accumulate_head img{width: 50px;height: 50px;margin-right: 5%;    border-radius: 50%}
.accumulate_head p:nth-child(1){width: 30%;}
.des{width: 50%;position: relative;text-align: right;}
.accumulate_integral{line-height: 25px;height: 25px;font-weight: bold;font-size: 20px;}
.des .text{position:absolute;right:-20%;top:-8px}
.accumulate-filter{display: flex;text-align: center;justify-content: space-around;border-bottom: 1px solid #e9e9e9}
.accumulate-filter li{background: #fff;width: 100%;}
.accumulate-filter li a{color: #000;position: relative;padding: 20px 0px;display: block}
.accumulate-filter .active{border-bottom:1px solid #83a500}
.accumulate-filter .active a{color:#83a500}
/* .accumulate-filter li:nth-child(1),.accumulate-filter li:nth-child(2){position: relative;} */
.accumulate-filter li:nth-child(1) a::after,.accumulate-filter li:nth-child(2) a::after{content: '';height: 25px;border: 1px solid #e9e9e9;position: absolute;z-index: 10;right: 0px;}
.accumulate-box{display: flex;flex-wrap: wrap;}
.accumulate-item{position: relative;width: 100%;padding: 15px 5%;background: #fff;border-bottom: 1px solid #e9e9e9}
.accumulate-item .item-left{width: 94%}
.accumulate-item .item-left p:nth-child(2),.accumulate-item .item-left p:nth-child(3){color: #d9d9d9;font-size: 14px}
/* .accumulate-item .item-right{position: absolute;top: 50%;right: 0px;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);} */
.accumulate-item .item-right{position: absolute;top: 40%;right: 4%;}
/* 商品页面的弹窗 */
.operation{padding: 0px 10px;color: #fff;}
.value {border: 1px solid #999;margin: 10px auto}
.reduce{background-color: #cccccc; border-right: 1px solid #999;}
.add{background: #83a500;    border-right: 1px solid #999;}
#num{height: 100%;margin: 10px -3px;border: none;width: 35px;text-align: center;outline: none;}

/* 其他 */

@media screen and (min-width:750px){
    /* bind 账号绑定 */
    /* .input-item input {width:93%;padding-left: 6%;height: 50px;font-size: 18px;} */
    /* login 登录 */
    .tip{font-size: 18px}
    
}
@media screen and (min-width:414px )and (max-width:750px ) { 
    
}
@media screen and (min-width:375px) and (max-width:413px ) {
    /* bind 账号绑定 */
    .info-form input{height: 40px;font-size: 14px;}
    /* .input-item input {padding-left: 15%;width: 84%;} */
    .input-before {margin-top: 13px;height: 18px;line-height: 18px;}
    .input-before img {height: 18px;}
    .btn{padding: 12px 0px;font-size: 14px}
    /* login 登录 */
    .tip{font-size: 14px}
    /* pwd 修改密码 */
    .change-pwd .input-before {width: 16%;font-size: 14px;}
    /* forgetpwd 忘记密码 */
    .submit-tip{font-size: 14px}
    /* my个人中心 */
    .my-head img {width: 55px;height: 55px;margin-top: 4px}
    .my-head span,.integral {font-size: 14px}
    .rank{width: 24%}
    .rank span {font-size: 14px ;margin-left: 0;}
    .integral span {font-size: 16px;margin-left: 10%;}
    .box-item img {width: 65px;height: 65px;}
    .box-item .description {font-size: 14px;}
    /* exchange兑换明细 */
    .exchange-item img {width: 55px;height: 55px;}
    .exchange-item .description .title,.exchange-item .detail {font-size: 14px}
    .exchange-item .description .time, .number {font-size: 12px}
    /* setting 个人设置 */
    .setting_head img {width: 75px;height: 75px;}
    .setting_head,.setting-box {font-size: 14px}
    .setting-item {padding: 18px 8% 18px 5%;}
    .setting-item-special {padding: 13px 8% 13px 5%;}
    /*rank  积分排行 */
    .rank-rank{top:80px}
    .rank-head{font-size: 14px;padding-bottom: 10px;}
    .rank-filter li {padding: 13px 0px;font-size: 14px;}
    .rank-item-special {    padding: 13px 5%;font-size: 14px}
    .rank-item{font-size: 14px}
    .rank-filter li span{color: #000;position: relative;padding: 10px 5%;display: block}
    .rank-filter img{width: 55%; margin-left: 50%; }
    .rank-item:nth-child(1) .rank-ranking::after{left: -7.5px;width: 23px;height: 28px;}
    .rank-item:nth-child(2) .rank-ranking::after{left: -7.5px;width: 23px;height: 28px;}
    .rank-item:nth-child(3) .rank-ranking::after{left: -7.5px;width: 23px;height: 28px;}
    /*integral-shop积分商城 */
    .integral-img img {height: 130px;}
    .integral-detail .exchange {font-size: 12px}
     /*my_accumulate 个人积分  */
    .accumulate_head{font-size: 14px}
    .accumulate-filter li {font-size: 14px}
    .accumulate-filter li:nth-child(1)::after, .accumulate-filter li:nth-child(2)::after {height: 15px}
    .accumulate-item {font-size: 15px;padding: 13px 5%}
    .accumulate-item .item-left p:nth-child(2), .accumulate-item .item-left p:nth-child(3) {font-size: 14px}
}
@media screen and (min-width:320px ) and (max-width:374px) {
    /* bind 账号绑定 */
    .info-form input{height: 40px;font-size: 12px;}
    .input-before {margin-top: 13px;height: 18px;line-height: 18px;}
    .input-before img {height: 18px;}
    .btn{padding: 12px 0px;font-size: 12px}
    /* login 登录 */
    .tip{font-size: 12px}
    /* pwd 修改密码 */
    .change-pwd .input-before {width: 16%;font-size: 12px;}
    /* forgetpwd 忘记密码 */
    .submit-tip{font-size: 12px}
    /* my个人中心 */
    .my-head img {width: 50px;height: 50px;margin-top: 6px}
    .my-head span,.integral {font-size: 12px}
    .rank{font-size: 12px;width: 23%;}
    .rank span {font-size: 12px ;margin-left: 0;}
    .integral span {font-size: 14px;margin-left: 10%;}
    .box-item img {width: 60px;height: 60px;}
    .box-item .description {font-size: 12px;}
    /* exchange兑换明细 */
    .exchange-item img {width: 50px;height: 50px;}
    .exchange-item .description .title,.exchange-item .detail {font-size: 12px}
    .exchange-item .description .time, .number {font-size: 10px}
    /* setting 个人设置 */
    .setting_head img {width: 70px;height: 70px;}
    .setting_head,.setting-box {font-size: 12px}
    .setting-item {padding: 15px 8% 15px 5%;}
    .setting-item-special {padding: 10px 8% 10px 5%;}
    /*rank  积分排行 */
    .rank-rank{top:70px;font-size: 14px;}
    .rank-head{font-size: 12px;padding-bottom: 10px;}
    .rank-filter li {padding: 10px 0px;font-size: 12px;}
    .rank-item-special {    padding: 10px 5%;font-size: 12px}
    .rank-item{font-size: 12px}
    .rank-filter img{width: 55%; margin-left: 40%; }
    .rank-filter li span{color: #000;position: relative;padding: 5px 5%;display: block}
    .rank-item:nth-child(1) .rank-ranking::after{left: -7.5px;width: 20px;height: 25px;}
    .rank-item:nth-child(2) .rank-ranking::after{left: -7.5px;width: 20px;height: 25px;}
    .rank-item:nth-child(3) .rank-ranking::after{left: -7.5px;width: 20px;height: 25px;}
    /*integral-shop积分商城 */
    .integral-left {width: 16%;}
    .integral-right {width: 84%;}
    .integral-img img {height: 110px;}
    .integral-detail {font-size: 12px;}
    .integral-detail .exchange {font-size: 12px}
    /*my_accumulate 个人积分  */
    .accumulate_head{font-size: 12px}
    /* .accumulate_integral{right: -11%;} */
    .des .text {top:-3px}
    .accumulate-filter li {font-size: 12px}
    .accumulate-filter li:nth-child(1)::after, .accumulate-filter li:nth-child(2)::after {height: 15px}
    .accumulate-item {font-size: 14px;padding: 10px 5%}
    .accumulate-item .item-left p:nth-child(2), .accumulate-item .item-left p:nth-child(3) {font-size: 12px}

}
